<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<script type="text/javascript" src="js/image-data-helper.js"></script>
<script type="text/javascript" src="js/canvas-painter.js"></script>
<script type="text/javascript" src="js/mosaic.js"></script>
<!-- <script type="text/javascript" src="js/painter-main.js"></script> -->
<style type="text/css">

canvas{
	/*background-color: rgba(0,0,0,0.05);*/
	background-color: transparent;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
}

</style>
</head>
<body>
<h4>Match:<em></em></h4>
<canvas width="360" height="240" id="system"></canvas>
<canvas width="360" height="240" id="user"></canvas>

<script type="text/javascript">

//init canvas;
var cvs = document.querySelector('#system');
var ctx = cvs.getContext('2d');
ctx.beginPath();
// ctx.moveTo(100, 100);
// ctx.lineTo(110, 100);
ctx.arc(180, 120, 80, Math.PI / 180 * -60, Math.PI / 180 * 240);
ctx.lineTo(180, 120)
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();

//mosaic block size
var blockSize = 6;

//get init canvas mosaic
var systemMosaic = getMosaic(ctx, blockSize);
//draw mosaic (only for debug)
drawMosaic(systemMosaic, ctx, blockSize, '0,0,255');


var painter = new CanvasPainter('#user');
painter.onbegin = function(){
	this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
};
painter.onmove = function(p){
	var ctx = this.context;
	var previous = this.previousPoint;
	ctx.beginPath()
	ctx.moveTo(previous.x, previous.y);
	ctx.lineTo(p.x, p.y);
	ctx.closePath();
	ctx.lineWidth = 0.5;
	ctx.strokeStyle = '#00f';
	ctx.stroke();
};
painter.onstop = function(){
	var mosaic = getMosaic(this.context, blockSize);
	var result = compairMosaic(systemMosaic, mosaic);

	var lost = result.lost.map(function(a){
		var p = a[1];
		p.weight = a[0] ? .5 : .3;
		return p;
	});

	document.querySelector('h4>em').innerHTML
		= (Math.round(result.score * 1000) / 10).toFixed(1)
		+ '%'
		;

	drawMosaic(lost, this.context, blockSize, '255,0,0');


	console.log(result)

	//draw user mosaic (only for debug)
	// drawMosaic(mosaic, this.context, blockSize, '0,0,255');
};


</script>
</body>
</html>